<template>
  <div class="dls-team_horizontal_push">
    <recommend-header :headerData="headerData"></recommend-header>
    <main>
      <div class="user-list" v-show="lists.length">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          :immediate-check="immediateCheck"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
          v-show="lists.length"
        >
          <div v-for="(item, index) in lists" :key="index" class="item clearfix">
            <div class="levelimg fl">
              <img :src="item.headimgurl||defaultPhotoImg" width="100%" alt />
            </div>
            <div class="levelinfo fl">
              <p>
                <span>昵称：</span>
                <span>{{item.nickname}}</span>
              </p>
              <p v-if="item.mobile">
                <span>手机：</span>
                <span>{{item.mobile}}</span>
              </p>
              <p>
                <span>地区：</span>
                <span>{{item.country}}{{item.province}}{{item.city}}</span>
              </p>
              <p v-if="item.rank_name">
                <span>级别：</span>
                <span>{{item.rank_name}}</span>
              </p>
              <p>
                <span>时间：</span>
                <span>{{item.create_time}}</span>
              </p>
              <!--    梅之音生物 定制 微信号  start    -->
              <p v-if="item.weixin_account">
                <span>微信号：</span>
                <span>{{item.weixin_account}}</span>
              </p>
              <!--    梅之音生物 定制 微信号  end    -->
            </div>
          </div>
        </van-list>
      </div>
      <no-data v-show="!lists.length && finished" :noData="noData"></no-data>
    </main>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import recommendHeader from '@/views/user/components/recommendHeader'
import { getDlsRecommend } from '@/api/user/dls/dlsApi'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      headerData: {
        settle_commission: '',
        all_order_amount: '',
        dls_num: '',
        order_total: '',
        dls_team_num: '',
        type: 2
      },
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_distributor.png',
        text: '暂无推荐',
        marginTop: '5em'
      },
      lists: [],
      p: 1,
      error: false,
      loading: false,
      finished: false,
      immediateCheck: false
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    onLoad() {
      if (this.finished) return false
      const data = { p: this.p, type: this.headerData.type }
      getDlsRecommend(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (data.p == 1) {
            this.headerData.settle_commission = res.data.settle_commission
            this.headerData.all_order_amount = res.data.all_order_amount
            this.headerData.dls_num = res.data.dls_num
            this.headerData.order_total = res.data.order_total
            this.headerData.dls_team_num = res.data.dls_team_num
          }
          this.lists.push(...res.data.user_list)
          if (res.data.user_list.length < 10) {
            this.finished = true
          } else {
            this.p++
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  components: {
    recommendHeader,
    noData
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/cardList/index.scss';
@import 'src/styles/variables';
@import 'src/styles/mixin';

</style>
